<template>
   <Sidebar ref="sidebar" :title="$t('message.xmindMap.formula')">
    <div class="box">
      <div class="formulaInputBox">
        <el-input
          v-model="formulaText"
          :rows="4"
          resize="none"
          type="textarea"
          :placeholder="$t('message.placeholder.pleaseLaTex')"
          @keydown.stop
        />
        <el-button
          size="small"
          type="primary"
          style="width: 100%; margin-top: 20px;"
          @click="confirm"
          >{{$t('message.finish')}}</el-button
        >
      </div>
      <div class="title">{{$t('message.xmindMap.commonFormulas')}}</div>
      <div class="formulaList">
        <div class="formulaItem" v-for="(item, index) in list" :key="index">
          <div class="overview" v-html="item.overview"></div>
          <div class="text" @click="formulaText = item.text">
            {{ item.text }}
          </div>
        </div>
      </div>
    </div>
  </Sidebar>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance,
  onBeforeUnmount
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import Sidebar from './Sidebar.vue'
import { formulaList } from './config'
import 'katex/dist/katex.min.css'
import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({
  mindMap: {
    type: Object
  },
  activeSidebar:String
})

const formulaText = ref('')
const list = ref([])
const sidebar = ref()
const activeNodes = ref([])
watch(()=>props.activeSidebar,(newV)=>{
  if (newV === 'formulaSidebar') {
      sidebar.value.show = true
    } else {
      sidebar.value.show = false
    }
})
onMounted(()=>{
  proxy.$eventBus.$on('formulaSidebar', showFormula)
  proxy.$eventBus.$on('node_active', handleNodeActive)
  init()
})
onBeforeUnmount(()=>{
  proxy.$eventBus.$off('formulaSidebar', showFormula)
  proxy.$eventBus.$off('node_active', handleNodeActive)
})
function showFormula(){
  // sidebar.value.show = true
}
function init() {
  list.value = formulaList.map(item => {
    return {
      overview: window.katex.renderToString(
        item,
        props.mindMap.formula.getKatexConfig()
      ),
      text: item
    }
  })
}
function handleNodeActive(...args) {
  activeNodes.value = [...args[1]]
  if (
    activeNodes.value.length <= 0 &&
    props.activeSidebar === 'formulaSidebar'
  ) {
    // sidebar.value.show = false
    formulaText.value = ''
  }else{}
}
function confirm() {
  let str = formulaText.value.trim()
  if (!str) return
  props.mindMap.execCommand('INSERT_FORMULA', str)
  // sidebar.value.show = false
  formulaText.value = ''
}
</script>
<style lang="less" scoped>
.box {
  padding: 10px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  &.isDark {
    .title {
      color: #fff;
    }

    .formulaList {
      .formulaItem {
        .overview,
        .text {
          color: #fff;
        }

        .text {
          background-color: #363b3f;
        }
      }
    }

    ::v-deep(.el-textarea__inner) {
      background-color: transparent;
      color: #fff;
    }
  }

  .title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin: 10px 0;
    flex-shrink: 0;
  }

  .formulaInputBox {
    flex-shrink: 0;
  }

  .formulaList {
    height: 100%;
    overflow-y: auto;

    .formulaItem {
      position: relative;
      display: flex;
      overflow: hidden;
      align-items: center;
      border: 1px solid #dcdfe6;
      border-bottom: none;

      &:last-of-type {
        border-bottom: 1px solid #dcdfe6;
      }

      .overview,
      .text {
        width: 50%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
      }

      .overview {
        padding: 10px 0;
        border-right: none;
      }

      .text {
        cursor: pointer;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border-left: 1px solid #dcdfe6;
        background-color: #fafafa;
      }
    }
  }
}
</style>
